<template>
  <div class="tabList">
    <van-tabs v-model="active" :ellipsis="false">
      <van-tab title="机构排行榜-总榜">
        <listTotal :game-info="gameInfo" />
      </van-tab>
      <van-tab title="机构排行榜-品势榜">
        <listNoneCompetitive :game-info="gameInfo" />
      </van-tab>
      <van-tab title="机构排行榜-竞技榜">
        <listCompetitive :game-info="gameInfo" />
      </van-tab>
      <van-tab title="积分榜">
        <listScore :game-info="gameInfo" />
      </van-tab>
      <van-tab title="赛区榜">
        <listDelegation :game-info="gameInfo" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import listTotal from '../components/listTotal';
import listNoneCompetitive from '../components/listNoneCompetitive';
import listCompetitive from '../components/listCompetitive';
import listScore from '../components/listScore';
import listDelegation from '../components/listDelegation';

export default {
  components: {
    listTotal,
    listNoneCompetitive,
    listCompetitive,
    listScore,
    listDelegation
  },
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    },
    listActive: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      active: 0
    };
  },
  watch: {
    listActive: {
      immediate: true,
      handler(val) {
        this.active = val;
      }
    }
  }
};
</script>

<style>
  .tabList .van-tabs__line{
    background-color: unset;
  }
  .tabList .van-tabs__nav {
    background-color: #F8F8F8;
  }
  .van-tab.van-tab--active .van-tab__text {
    font-weight: 500;
  }
</style>
